<template>
  <a-modal
    v-model="visible"
    :title="title"
    @ok="handleOk"
    :confirmLoading="confirmLoading || tableLoading"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
  >
    <a-spin tip="Loading..." :spinning="tableLoading">
      <a-form-model :model="form" ref="textForm" v-bind="layout" :rules="rules">
        <a-form-model-item label="填写文案" prop="copyContent">
          <div class="rule">
            <a-input
              v-model="form.copyContent"
              placeholder="输入海报文案(4-24个字)"
              :max-length="24"
            />
            <span class="limitWords" v-if="form.copyContent"
              >{{ form.copyContent.length || 0 }}/24</span
            >
            <span class="limitWords" v-else>0/24</span>
          </div>
        </a-form-model-item>
        <a-form-model-item label="选择分类" prop="copywritingCategoryId">
          <a-select
            v-model="form.copywritingCategoryId"
            :options="copyList"
            placeholder="选择文案分类"
          ></a-select>
          <a-button
            type="link"
            @click="addClassify"
            style="position: absolute; right: -84px; top: -4px"
            >新增分类</a-button
          >
        </a-form-model-item>
        <a-form-model-item label="排序" prop="sort">
          <a-input-number
            :precision="0"
            v-model="form.sort"
            style="width: 300px"
          />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
    <add-text-classify-modal
      ref="addTextClassifyModal"
      @refresh="getCopyList"
    ></add-text-classify-modal>
  </a-modal>
</template>

<script>
import addTextClassifyModal from "@/views/menuPage/gallery/contentManagement/posterManage/stencils/components/components/text/addTextClassifyModal";
export default {
  components: {
    addTextClassifyModal,
  },
  props: {
    record: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      copyList: [],
      visible: false,
      form: {
        copyContent: "",
        copywritingCategoryId: [],
        sort: "",
      },
      rules: {
        copyContent: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
        copywritingCategoryId: [
          { required: true, message: "请选择文案分类", trigger: "blur" },
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 15 },
      },
      title: "新增文案",
      tableLoading: false,
      confirmLoading: false,
    };
  },
  mounted() {
    // this.getCopyList();
  },
  watch: {
    visible: async function (val, oldVal) {
      if (!val) {
        this.title = "新增文案";
        this.form = {
          copywritingCategoryId: "",
          copyContent: "",
          sort: "",
          id: "",
        };
        this.confirmLoading = false;
        this.$refs.textForm.resetFields();
        this.$emit("close");
      } else {
        await this.getCopyList();
        if (this.record?.id) {
          this.title = "编辑文案";
          this.form.copywritingCategoryId = this.copyList.find((item) => {
            return item.title == this.record.getCopywritingCategorName;
          })?.id;
          this.form.copyContent = this.record.copyContent;
          this.form.sort = this.record.sort;
          this.form.id = this.record.id;
        }
      }
    },
  },
  methods: {
    // 查询文案分类
    async getCopyList() {
      this.tableLoading = true;
      const res = await this.$get(
        "goldenhome/gh/poster_admin/copywriting/category/list"
      );
      if (res?.returnCode == 1000) {
        this.copyList = res?.dataInfo?.map((item) => {
          return {
            title: item.name,
            id: item.id,
            key: item.id,
          };
        });
        this.tableLoading = false;
      } else {
        this.tableLoading = false;
      }
    },
    addClassify() {
      this.$refs.addTextClassifyModal.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    handleOk() {
      this.$refs.textForm.validate(async (valid) => {
        if (valid) {
          this.confirmLoading = true;
          try {
            if (this.form.id) {
              await this.$post(
                "goldenhome/gh/poster_admin/poster/copywriting/update",
                { ...this.form }
              );
            } else {
              await this.$post(
                "goldenhome/gh/poster_admin/poster/copywriting/add",
                { ...this.form }
              );
            }
            this.handleCancel();
            this.$emit("refresh");
          } catch (e) {
            console.log(e);
            this.confirmLoading = false;
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.rule {
  display: inline-block;
  position: relative;
  width: 100%;
  .limitWords {
    position: absolute;
    right: -40px;
    bottom: 0px;
    font-size: 10px;
    color: #ccc;
  }
}
</style>
